<template>
    <el-dialog class="re-dialog" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false" :title="dialogTitle">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
            <el-row v-for = "(item,index) in formConfig" :key = "index">
                <el-col :span="20">
                    <el-form-item :label="item.label+'：'" :prop="item.code">
                        <el-input v-if = "item.type == 'input'" :placeholder="item.placeholder" type="text" :maxlength = "item.maxlength"  v-model="ruleForm[item.code]" />
                        <el-input v-if = "item.type == 'textarea'" :placeholder="item.placeholder" type="textarea" :maxlength = "item.maxlength"  v-model="ruleForm[item.code]" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span class="dialog-footer">
            <button class="footer-btn cancel" @click="dialogVisible=false">取 消</button>
            <button @click="onSubmit('ruleForm')" class="footer-btn sure">确定</button>
        </span>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
export default {
    data() {
        return {
            dialogTitle: "新增知识库", //dialog 标题
            dialogVisible: false,
            currentTitle: "",
            formConfig:[
                {label:"标题",code:"title",placeholder:"请输入标题",type:"input",maxlength:32},
                {label:"关键字",code:"keyword",placeholder:"请输入关键字",type:"input",maxlength:20},
                {label:"内容",code:"content",placeholder:"请输入内容",type:"textarea",maxlength:9999999},
            ],
            ruleForm: {
                title: "",
                keyword: "",
                content: "",
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: "请输入标题",
                        trigger: "change"
                    }
                ],
                keyword: [
                    {
                        required: true,
                        message: "请输入关键字",
                        trigger: "change"
                    }
                ],
                content: [
                    {
                        required: true,
                        message: "请输入内容",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe(
            "showAddKnowledgeDialog",
            (type, args = {}) => {
                this.dialogVisible = true;
                this.currentTitle = args.currentTitle;
                this.ruleForm = args;
                setTimeout(() => {
                    this.$refs.ruleForm.clearValidate(); //重置
                }, 0);
            }
        );
        this.pubsub_token1 = Pubsub.subscribe(
            "hideAddKnowledgeDialog",
            (type, args) => {
                this.dialogVisible = false;
                this.ruleForm.name = "";
            }
        );
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        /**
         * onSubmit提交
         */
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$emit("onSubmit", this.ruleForm);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.current-label {
    width: 120px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
</style>